<template>
    <img @bind="imgNode" :src="icon" :width="width" :height="height" :grid="grid" @click="doScale" @rightclick="doScale">
        <txt @bind="txtNode" :text="title" :x="txtX" :y="txtY" :size="txtSize" color="#ffffff"></txt>
    </img>
    <audio :src="audio" loop="false" play="false"></audio>
</template>

<script>
    data(){
        return {
            icon: "",
            title: "",
            audio: "",
            imgNode: null,
            txtNode: null,
            oldSet: {},
            txtX: 0,
            txtY: 0,
            txtSize: 0,
            grid: ""
        }
    }

    create() {
        this.txtSize = Math.floor(this.imgNode.height / 2.3);
        this.txtX = (this.imgNode.width - this.txtNode.width) / 2;
        this.txtY = (this.imgNode.height - this.txtNode.height) / 2;
        this.txtNode.width /= this.imgNode.scale.x;
        this.txtNode.height /= this.imgNode.scale.y;
        console.log("button create");
    }

    update(delta) {

    }

    destroyed() {

    }
    
    doScale(event){
        this.oldSet = { x: this.imgNode.x, y: this.imgNode.y, width: this.imgNode.width, height: this.imgNode.height };
		this.imgNode.x += this.imgNode.width * 0.02;
		this.imgNode.y += this.imgNode.height * 0.02;
		this.imgNode.width = this.imgNode.width * 0.96;
		this.imgNode.height = this.imgNode.height * 0.96;
        setTimeout(() => {
			this.imgNode.x = this.oldSet.x;
			this.imgNode.y = this.oldSet.y;
			this.imgNode.width = this.oldSet.width;
			this.imgNode.height = this.oldSet.height;
            //this.onclick(event);
		}, 100);
    }
</script>